<template>
  <div class="home">
    <div id="container"></div>
    <div class="main">
      <p style="height: 0.325rem;"></p>
      <p class="title colorF font_s27 textC">浦东新区经营性公墓(骨灰堂)协同监管大数据平台</p>
      <div class="flex JustifyContentSA">
        <div class="flex cursor" @click="listing=true">
          <img style="height:2.5rem ;margin-right: 1rem;" src="../assets/img/home/13.png" alt="">
          <div>
            <p class="colorF font_s19">经营性公墓</p>
            <p><span class="font_s27" style="color: #5AD834; padding: 0px 0.625rem 0px 1.225rem;">9</span><span class="colorF font_s14">家</span></p>
          </div>
        </div>
        <!-- <div class="flex">
          <img style="height:2.5rem ;margin-right: 1rem;" src="../assets/img/home/13.png" alt="">
          <div>
            <p class="colorF font_s19">经营性骨灰堂</p>
            <p><span class="font_s27" style="color: #5AD834;">6</span><span class="colorF font_s14">家</span></p>
          </div>
        </div> -->
        <div class="nav font_s18 flex JustifyContentSA colorF cursor">
          <span :class="{active:isActive===2}" @click="openurl(2)">综合监管</span>
          <span :class="{active:isActive===1}" @click="openurl(1)">数据海</span>
          <span :class="{active:isActive===3}" @click="openurl(3)">机构监管</span>
        </div>
        <div class="flex cursor" @click="jingying=true">
          <img style="height:2.5rem ;margin-right: 1rem;" src="../assets/img/home/14.png" alt="">
          <div>
            <p class="colorF font_s19">经营性骨灰堂</p>
            <p><span class="font_s27" style="color: #5AD834; padding: 0px 0.625rem 0px 1.225rem;">6</span><span class="colorF font_s14">家</span></p>
          </div>
        </div>
       <!-- <div class="flex">
          <img style="height:2.5rem ;margin-right: 1rem;" src="../assets/img/home/15.png" alt="">
          <div>
            <p class="colorF font_s19">公益性殡葬设施 </p>
            <p><span class="font_s27" style="color: #5AD834;">6</span><span class="colorF font_s14">家</span></p>
          </div>
        </div> -->
      </div>
    </div>
    <ModalPolygon title="浦东新区经营性公墓清单" v-if="listing" @hidden="hidden">
      <Listing/>
    </ModalPolygon>
    <ModalPolygon01 title="经营性骨灰堂" v-if="jingying" @hidden="hiddenJingying">
      <ListingJingYing></ListingJingYing>
    </ModalPolygon01>
    <!-- <Modal v-if="jingying" @hidden="hiddenJingying">
      <img src="../assets/img/bigimg/16.png" alt="" style="position: absolute; top: 3%; left: 3.5%;">
    </Modal> -->
    <router-view/>
  </div>
</template>

<script>
import ModalPolygon from '@/components/ModalPolygon.vue'
import { mapFun } from './datasea/components/gdmap'
import Listing from './topcommon/listing'
import ListingJingYing from './topcommon/ListingJingying'
import ModalPolygon01 from '@/components/ModalPolygon01.vue'
export default {
  name: 'home',
  components: {
    ModalPolygon,
    Listing,
    ListingJingYing,
    ModalPolygon01
    // Paginate
  },
  data () {
    return {
      isActive: 2,
      listing: false,
      jingying: false
    }
  },
  mounted () {
    this.gdmap()
  },
  methods: {
    openurl (index) {
      this.isActive = index
      if (index === 1) {
        this.$router.push('/datasea')
      } else if (index === 2) {
        this.$router.push('/comprehensive')
      } else if (index === 3) {
        this.$router.push('/organization')
      }
    },
    gdmap () {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle: 'amap://styles/dark',
        zoom: 11,
        pitch: 40,
        rotation: 45,
        viewMode: '3D',
        center: [121.5102850000, 31.1996750000]
      })
      this.$root.MapGd = map
      mapFun(map)
    },
    hidden () {
      this.listing = false
    },

    hiddenJingying () {
      this.jingying = false
    }
  }
}
</script>
<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100%;
  // background: #2e2e2e;
  .main{
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    .title{
      line-height: 4.3125rem;
      background: url(../assets/img/home/11.png) no-repeat;
      background-size: auto 100%;
      background-position: center;
    }
    .nav{
      width: 26.75rem;
      height: 3.125rem;
      margin-top: 0.125rem;
      line-height: 3rem;
      background: url(../assets/img/home/12.png) no-repeat;
      background-size: 100% 100%;
      .active{
       color: #5AD834;
      }
    }
  }
  #container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
}
</style>
